<!--
 * @Author: Zhang Kai
 * @Date: 2022-05-10 17:24:32
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-05-18 18:00:56
 * @FilePath: /metricsx-standard-ui/src/components/downloadUploadBtns/importTip.vue
-->
<template>
  <el-dialog
    custom-class="import-tip-dialog"
    v-model="visible"
    title="导入详情"
    width="30%"
    :before-close="handleClose"
  >
    <ul v-if="importTip">
      <li v-for="(value, key, index) in info" :key="key + '_' + index">
        <div class="lable">{{ value }}:</div>
        <div class="value">{{ importTip[key] }}</div>
      </li>
    </ul>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleDownload">下载详情</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { downLoadFile } from '@/utils/http';

export default defineComponent({
  props: {
    dialogVisible: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    importTip: {
      type: Object,
      default: null
    }
  },
  emits: ['dlgClose'],
  data() {
    return {
      visible: false,
      info: {
        duplicate: '因重复过滤数据',
        fail: '导入失败',
        success: '成功导入数据',
        total: '文件中总数据行数'
      }
    };
  },
  watch: {
    dialogVisible(v) {
      console.log('🚀 ~ file: importTip.vue ~ line 41 ~ dialogVisible ~ v', v);
      this.visible = v;
    }
  },
  methods: {
    handleClose() {
      this.visible = false;
      this.$emit('dlgClose');
    },

    async handleDownload() {
      try {
        downLoadFile({
          url: `/tmplate/logs/${this.importTip.batchNo}`,
          method: 'get'
        });
      } catch (e) {}
    }
  }
});
</script>

<style lang="scss">
.import-tip-dialog {
  .el-dialog__header {
    text-align: left;
  }
  .el-dialog__body {
    padding: 10px 15px;
    text-align: left;
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    li {
      display: flex;
      &:not(:last-child) {
        margin-bottom: 10px;
      }
      .value {
        padding-left: 5px;
      }
    }
  }
}
</style>
